<template>
  <div class="mypanel">
    <el-dialog title="新增员工" :visible="dialogShow" @close="cancel">
      <el-form ref="myform" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="form.username" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="入职时间" prop="timeOfEntry">
          <el-date-picker v-model="form.timeOfEntry" />
        </el-form-item>
        <el-form-item label="聘用形式" prop="formOfEmployment">
          <el-select
            v-model="form.formOfEmployment"
            placeholder="请选择聘用形式"
          >
            <el-option
              v-for="item in hireType"
              :key="item.value"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工号" prop="workNumber">
          <el-input
            v-model="form.workNumber"
            placeholder="请输入以0开头的工号"
          />
        </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <div class="mydep">
            <el-input
              v-model="form.departmentName"
              placeholder="请选择所在部门"
              @focus="openTree"
            />
            <el-tree
              v-if="treeShow"
              default-expand-all
              :data="depList"
              class="mytree"
              :props="treeprop"
              @node-click="handler"
            />
          </div>
        </el-form-item>
        <el-form-item label="转正时间" prop="correctionTime">
          <el-date-picker v-model="form.correctionTime" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入用到的接口
import { deptListAPI, addUserAPI } from '@/api/index'
// 导入聘用形式的数据源
import employees from '@/api/constant/employees'
export default {
  // dialogShow：控制面板的显示与隐藏
  props: ['dialogShow'],
  data() {
    return {
      // 新增员工的对象
      form: {
        username: '', // 姓名
        mobile: '', // 手机
        formOfEmployment: '', // 聘用形式
        timeOfEntry: '', // 入职时间
        departmentName: '', // 部门
        workNumber: '', // 工号
        correctionTime: '' // 转正时间
      },
      // 表单数据校验
      rules: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              // 定义手机号的验证规则
              const tel =
                /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
              // 判断手机号是否匹配正则规则
              const bool = tel.test(value)
              // 判断
              bool ? callback() : callback(new Error('手机号不合法'))
            }
          }
        ],
        formOfEmployment: [
          { required: true, message: '请输入聘用形式', trigger: 'blur' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '请输入部门名称', trigger: 'change' }
        ],
        workNumber: [
          { required: true, message: '请输入工号', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              const num = /^\d{4,7}$/
              const bool = num.test(value)
              bool ? callback() : callback(new Error('工号不符合要求'))
            }
          }
        ],
        correctionTime: [
          { required: true, message: '请选择转正时间', trigger: 'blur' }
        ]
      },
      // 得到聘用形式的数据源
      hireType: employees.hireType,
      // 部门树状结构的数据源
      depList: [],
      // 控制部门树状结构的显示与隐藏
      treeShow: false,
      // 属性组建的配置属性
      treeprop: {
        label: 'name'
      }
    }
  },
  created() {
    // 页面加载完毕时调用方法，获得数据
    this.getDeptList()
  },
  methods: {
    // 点击时调用方法，提交新增的数据
    submit() {
      if (!this.form) {
        return this.$message.error('表单内的各项内容不能为空')
      }
      this.$refs.myform.validate(async(valid) => {
        if (valid) {
          // 发起请求，新增员工数据
          const res = await addUserAPI(this.form)
          // console.log(res)
          this.$message.success(res.message)
          // 新增成功后关闭面板并且清空数据重置表单
          this.cancel()
          // 重新加载页面
          this.getDeptList()
        } else {
          return this.$message.error('请按照表单要求输入内容')
        }
      })
    },
    // 当点击树状结构中的元素时会触发这个事件
    handler(data) {
      // 将数据源中的name属性赋值给form中的departmentName
      this.form.departmentName = data.name
      // 关闭el-tree
      this.treeShow = false
    },
    // 调用接口，得到所有的部门数据
    async getDeptList() {
      const res = await deptListAPI()
      // 保存得到的数据
      this.depList = this.turnData(res.data.depts, '')
    },
    // 定义方法，将得到的部门数据转换为树状结构
    turnData(arr, pid) {
      const res = []
      arr.forEach((item) => {
        if (item.pid === pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    // 点击时关闭面板
    cancel() {
      this.$emit('update:dialogShow', false)
      this.form = {
        username: '', // 姓名
        mobile: '', // 手机
        formOfEmployment: '', // 聘用形式
        timeOfEntry: '', // 入职时间
        departmentName: '', // 部门
        workNumber: '', // 工号
        correctionTime: '' // 转正时间
      }
      // 重置表单的校验规则
      this.$refs.myform.resetFields()
    },
    // 获得焦点时触发的事件，显示部门的树状结构
    openTree() {
      this.treeShow = true
    }
  }
}
</script>

<style lang="scss">
.mypanel {
  .el-dialog {
    width: 42%;
    .el-dialog__body {
      padding-bottom: 0;
    }
    .el-dialog__footer {
      padding: 0 0 15px;
      text-align: center;
    }
    .mydep {
      width: 300px;
      position: relative;
      .mytree {
        position: absolute;
        bottom: 0px;
        left: 0px;
        transform: translateY(-48px);
        width: 100%;
        z-index: 999;
        border-radius: 4px;
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
